<template>
  <DialogSubmitForm v-bind="formFrame" ref="form" :beforeClose>
    <template #authTree>
      <el-tree
        ref="eltree"
        :key="authTreeKey"
        :data="authData"
        node-key="menuPath"
        :expand-on-click-node="false"
        :props="{ label: 'menuName' }"
        show-checkbox
      />
    </template>
  </DialogSubmitForm>
</template>
<script setup lang="ts">
import { MDialogSubmitForm as DialogSubmitForm } from "page-com";
import { ref, shallowReactive, useId, useTemplateRef } from "vue";
import { addRole } from "@/api/user/roleApi";
import { DialogSubmitFormFrame } from "page-com";
import { successMsg } from "@/utils/message";
const props = defineProps<{
  authData: ShopTreeMenuVo[];
}>();
const form = useTemplateRef("form");
const eltree = useTemplateRef("eltree");
const authTreeKey = ref(new Date().getTime());
const formFrame = shallowReactive<DialogSubmitFormFrame>({
  submitFun: async function (data) {
    data.authPaths = eltree.value.getCheckedNodes().map(v => v.menuPath);
    let res = await addRole(data);
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("添加成功");
      emit("saveSuccess", data);
      form.value.hide();
    }
  },
  width: "400px",
  items: [
    {
      frameType: "input",
      label: "角色名",
      key: "roleName",
      validations: {
        required: true
      }
    },
    {
      frameType: "slot",
      label: "权限",
      key: "roleAuths",
      slot: "authTree"
    }
  ]
});
function show() {
  form.value.show();
}
function beforeClose() {
  authTreeKey.value = new Date().getTime();
}
defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: ShopUserVo];
}>();
</script>
